{% load i18n %}
{% load l10n %}

<div class="xblock--drag-and-drop--editor editor-with-buttons">
    {{ js_templates|safe }}

    <div class="drag-builder">
        <section class="tab feedback-tab">
            <header class="tab-header">
                <h3>{% trans "Basic Settings" %}</h3>
            </header>
            <div class="tab-content">
                <form class="feedback-form">
                    <label class="h4">
                        <span>{% trans fields.display_name.display_name %}</span>
                        <input class="display-name" value="{{ self.display_name }}" />
                    </label>
                    <label class="checkbox-label" title="{% trans fields.show_title.help %}">
                      <input class="show-title" type="checkbox"
                        {% if self.show_title %}checked="checked"{% endif %}>
                      {% trans fields.show_title.display_name %}
                      <span class="sr">{% trans fields.show_title.help %}</span>
                    </label>

                    <label class="h4">
                        <span>{% trans fields.mode.display_name %}</span>
                        <select class="problem-mode" aria-describedby="problem-mode-description-{{id_suffix}}">
                            {% for field_value in fields.mode.values %}
                                <option value="{{ field_value.value }}" {% if self.mode == field_value.value %}selected{% endif %}>
                                    {% trans field_value.display_name %}
                                </option>
                            {% endfor %}
                        </select>
                    </label>
                    <div id="problem-mode-description-{{id_suffix}}" class="form-help">
                      {% trans fields.mode.help %}
                    </div>

                    <label class="h4 assessment-setting">
                      <span>{% trans fields.max_attempts.display_name %}</span>
                      <input class="max-attempts"
                             type="number"
                             min="1"
                             step="1"
                             aria-describedby="max-attempts-description-{{id_suffix}}"
                             {% if self.max_attempts %}value="{{ self.max_attempts }}"{% endif %} />
                    </label>
                    <div id="max-attempts-description-{{id_suffix}}" class="assessment-setting form-help">
                      {% trans fields.max_attempts.help %}
                    </div>

                    <label class="h4">
                        <span>{% trans fields.weight.display_name %}</span>
                        <input class="weight" type="number" step="0.1" value="{{ self.weight|unlocalize }}" />
                    </label>
                    <div id="weight-description-{{id_suffix}}" class="assessment-setting form-help">
                      {% trans fields.weight.help %}
                    </div>

                    <label class="h4">
                        <span>{% trans fields.question_text.display_name %}</span>
                        <textarea class="problem-text">{{ self.question_text }}</textarea>
                    </label>
                    <label class="checkbox-label">
                      <input class="show-problem-header"
                             type="checkbox"
                             aria-describedby="show-problem-header-description-{{id_suffix}}"
                        {% if self.show_question_header %}checked="checked"{% endif %}>
                      {% trans fields.show_question_header.display_name %}
                    </label>
                    <div id="show-problem-header-description-{{id_suffix}}" class="form-help">
                      {% trans fields.show_question_header.help %}
                    </div>

                    <label class="h4">
                        <span>{% trans "Introductory feedback" %}</span>
                        <textarea class="intro-feedback">{{ self.data.feedback.start }}</textarea>
                    </label>

                    <label class="h4">
                        <span>{% trans "Final feedback" %}</span>
                        <textarea class="final-feedback">{{ self.data.feedback.finish }}</textarea>
                    </label>
                </form>
            </div>
        </section>

        <section class="tab zones-tab hidden">
            <header class="tab-header">
                <h3>{% trans "Zones" %}</h3>
            </header>
            <div class="tab-content">
                <form class="target-image-form">
                    <fieldset>
                        <legend class="h4">{% trans "Background Image" %}</legend>
                        <label class="background-image-type">
                            <input type="radio" name="background-image-type-{{id_suffix}}" value="manual" />
                            {% trans "Provide custom image" %}
                        </label>
                        <label class="background-image-type">
                            <input type="radio" name="background-image-type-{{id_suffix}}" value="auto" />
                            {% trans "Generate image automatically" %}
                        </label>
                    </fieldset>
                    <fieldset class="background-manual">
                        <label class="h4" for="background-url-{{id_suffix}}">
                            <span>{% trans "Background URL" %}</span>
                        </label>
                        <input class="background-url"
                              id="background-url-{{id_suffix}}"
                              type="text"
                              aria-describedby="background-url-description-{{id_suffix}}" />
                        </label>
                        <button type="button" class="btn">{% trans "Change background" %}</button>
                        <div id="background-url-description-{{id_suffix}}" class="form-help">
                            {% trans "For example, 'http://example.com/background.png' or '/static/background.png'." %}
                        </div>
                    </fieldset>
                    <fieldset class="background-auto">
                        <fieldset>
                            <legend class="h4">{% trans "Zone Layout" %}</legend>
                            <label class="sr" for="autozone-cols-{{id_suffix}}">
                                {% trans "Number of columns" %}
                            </label>
                            <input id="autozone-cols-{{id_suffix}}"
                                   class="autozone-layout autozone-layout-cols"
                                   type="text"
                                   aria-describedby="autozone-layout-description-{{id_suffix}}" />
                            <span>&times;</span>
                            <label class="sr" for="autozone-rows-{{id_suffix}}">
                                {% trans "Number of rows" %}
                            </label>
                            <input id="autozone-rows-{{id_suffix}}"
                                   class="autozone-layout autozone-layout-rows"
                                   type="text"
                                   aria-describedby="autozone-layout-description-{{id_suffix}}" />
                            <div id="autozone-layout-description-{{id_suffix}}" class="form-help">
                                {% trans "Number of columns and rows." %}
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend class="h4">{% trans "Zone Size" %}</legend>
                            <label class="sr" for="autozone-zone-width-{{id_suffix}}">
                                {% trans "Zone width" %}
                            </label>
                            <input id="autozone-zone-width-{{id_suffix}}"
                                   class="autozone-size autozone-size-width"
                                   type="text"
                                   aria-describedby="autozone-size-description-{{id_suffix}}" />
                            <span>&times;</span>
                            <label class="sr" for="autozone-zone-height-{{id_suffix}}">
                                {% trans "Zone height" %}
                            </label>
                            <input id="autozone-zone-height-{{id_suffix}}"
                                   class="autozone-size autozone-size-height"
                                   type="text"
                                   aria-describedby="autozone-size-description-{{id_suffix}}" />
                            <div id="autozone-size-description-{{id_suffix}}" class="form-help">
                                {% trans "Size of a single zone in pixels." %}
                            </div>
                        </fieldset>
                        <button type="button" class="btn">{% trans "Generate image and zones" %}</button>
                    </fieldset>
                    <label class="h4">
                        <span>{% trans "Background description" %}</span>
                        <textarea required class="background-description"
                                  aria-describedby="background-description-description-{{id_suffix}}"></textarea>
                    </label>
                    <div id="background-description-description-{{id_suffix}}" class="form-help">
                        {% blocktrans %}
                            Please provide a description of the image for non-visual users.
                            The description should provide sufficient information to allow anyone
                            to solve the problem even without seeing the image.
                        {% endblocktrans %}
                    </div>
                </form>
            </div>
            <div class="tab-content">
                <form class="display-labels-form">
                    <h4>{% trans "Zone labels" %}</h4>
                    <label class="checkbox-label">
                        <input name="display-labels" class="display-labels" type="checkbox" />
                        <span>{% trans "Display label names on the image" %}</span>
                    </label>
                </form>
                <form class="display-borders-form">
                    <h4>{% trans "Zone borders" %}</h4>
                    <label class="checkbox-label">
                        <input name="display-borders" class="display-borders" type="checkbox" />
                        <span>{% trans "Display zone borders on the image" %}</span>
                    </label>
                </form>
            </div>
            <div class="tab-content">
                <h4>{% trans "Zone definitions" %}</h4>
                <div class="zone-editor">
                    <div class="controls">
                        <form class="zones-form"></form>
                        <button class="btn add-zone add-element">
                            <span class="icon add" aria-hidden="true"></span>
                            {% trans "Add a zone" %}
                        </button>
                    </div>
                    <div class="target">
                        <img class="target-img">
                        <div class="zones-preview">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="tab items-tab hidden">
            <header class="tab-header">
                <h3>{% trans "Items" %}</h3>
            </header>
            <div class="tab-content">
                <form class="item-styles-form">
                    <label class="h4">
                        <span>{% trans fields.item_background_color.display_name %}</span>
                        <input class="item-background-color"
                               value="{{ self.item_background_color }}"
                               aria-describedby="item-background-color-description-{{id_suffix}}">
                    </label>
                    <div id="item-background-color-description-{{id_suffix}}" class="form-help">
                      {% trans fields.item_background_color.help %}
                    </div>
                    <label class="h4">
                        <span>{% trans fields.item_text_color.display_name %}</span>
                        <input class="item-text-color"
                               value="{{ self.item_text_color}}"
                               aria-describedby="item-text-color-description-{{id_suffix}}">
                    </label>
                    <div id="item-text-color-description-{{id_suffix}}" class="form-help">
                      {% trans fields.item_text_color.help %}
                    </div>
                    <label class="h4">
                        <span>{% trans fields.max_items_per_zone.display_name %}</span>
                        <input type="number" min="1" step="1" class="max-items-per-zone"
                               value="{{ self.max_items_per_zone|unlocalize }}"
                               aria-describedby="max-items-per-zone-description-{{id_suffix}}">
                    </label>
                    <div id="max-items-per-zone-description-{{id_suffix}}" class="form-help">
                      {% trans fields.max_items_per_zone.help %}
                    </div>
                </form>
            </div>
            <div class="tab-content">
                <h4>{% trans "Item definitions" %}</h4>
                <form class="items-form"></form>
                <button class="btn add-item add-element">
                    <span class="icon add" aria-hidden="true"></span>
                    {% trans "Add an item" %}
                </button>
            </div>
        </section>

    </div>

    <div class="xblock-actions">
      <ul class="action-buttons">
        <li class="action-item">
          <a href="#" class="button action-primary continue-button">{% trans "Continue" %}</a>
        </li>

        <li class="action-item hidden">
          <a href="#" class="button action-primary save-button">{% trans "Save" %}</a>
        </li>

        <li class="action-item">
          <a href="#" class="button cancel-button">{% trans "Cancel" %}</a>
        </li>
      </ul>
    </div>
</div>
